<template>
  <div class="bg">
    <nav-com
      title="售后"
      :showView='showView'
      @back="backHandler()"
    ></nav-com>
    <van-tabs
      color="#FF6F4E"
      @change="childActive(active)"
      title-active-color="#FF6F4E"
      v-model="active"
      sticky
    >
      <van-pull-refresh
        v-model='isLoading'
        @refresh='onRefresh'
      >
        <van-tab
          v-for="(item) in tabList"
          :key="item.id"
          :title="item.title"
        >
          <div
            v-if='list.length == 0'
            class="empty"
          >
            <img src='../../../assets/t4.png'>
            <p>您还没有订单记录哦~</p>
          </div>
          <div
            v-else
            v-for="(item,index) in list"
            :key="index"
            class="orders_list"
          >
            <div
              class="order_box_title"
              style="display: flex; justify-content: space-between;  padding-top:5px;  margin-right: 10px;align-items: center;"
            >
              <div style=" max-width: 250px; white-space: nowrap; text-overflow: ellipsis;overflow: hidden;">订单编号:{{item.aftersale_sn}}</div>

              <div style="color:#FE4B20;font-size:14px">{{item.refund_status_text}}</div>

              <!-- <div style="color:#FE4B20;font-size:14px" v-if="item.status_name!='待付款'">{{item.status_name}}</div>
              <div style="" class="dfk" v-else>
                <van-count-down :time="item.countdown*1000" style="color: #fe332c"  />
              </div> -->
            </div>
            <div
              class="order_box"
            >
              <img :src="item.goods_image">
              <div>
                <p>{{item.goods_title}}</p>
                <p style="font-size:12px;">数量：{{item.goods_num}}</p>
                <span>￥{{item.goods_price}}</span>
              </div>
            </div>
            <div class="order_bottom">下单时间：{{item.ordertime | formatDateTime}}</div>
            <div style="display: flex;justify-content: flex-end;font-size:14px; padding-bottom: 10px;color: #4D4D4D;">
              <div
              v-if="item.aftersale_status==-1 || item.aftersale_status==2"
                @click="deleteSales(item.id)"
                style="padding: 0 15px;line-height: 36px;background: #EEEEEE;border-radius: 35px;margin-right: 10px;"
              >删除售后单</div>
              <div
                v-if="item.aftersale_status==-1"
                @click="cancelOrder(item)"
                style="padding: 0 20px;line-height: 36px;background: #EEEEEE;border-radius: 35px;margin-right: 10px;"
              >再次申请</div>
              <div
                v-if="item.aftersale_status"
                @click='toDetail(item.id, item.aftersale_status)'
                style="padding: 0 20px;line-height: 36px;background: #EEEEEE;border-radius: 35px;margin-right: 10px;"
              >售后详情</div>
            </div>
          </div>
        </van-tab>
      </van-pull-refresh>
    </van-tabs>
  </div>
</template>
<script>
import {
  getAfterSalesList,
  deleteAfterSales,
  putOrders,
  cancelOrderApi,
  putselfWithdrawal,
  orderConfirm,
} from "@/api/api";
import navCom from "@/component/nav";
import { Toast } from "vant";
export default {
  name: "orders",
  components: {
    navCom,
  },
  data() {
    return {
      radio: "",
      uid: weixin.getUserId(),
      showView: true,
      active: 0,
      tabList: [
        { id: 0, title: "全部" },
        { id: 1, title: "待处理" },
      ],
      list: [],
      page:1,
      isLoading: false,
    };
  },
  filters: {
    /*
        时间格式自定义 只需把字符串里面的改成自己所需的格式
        */
    formatDateTime: function (date) {
      var date = new Date(date * 1000);
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var Hours = date.getHours();
      if (Hours >= 0 && Hours <= 9) {
        Hours = "0" + Hours;
      }
      var Minutes = date.getMinutes();
      if (Minutes >= 0 && Minutes <= 9) {
        Minutes = "0" + Minutes;
      }
      var Seconds = date.getSeconds();
      if (Seconds >= 0 && Seconds <= 9) {
        Seconds = "0" + Seconds;
      }
      var currentDate =
        date.getFullYear() +
        "-" +
        month +
        "-" +
        strDate +
        " " +
        Hours +
        ":" +
        Minutes +
        ":" +
        Seconds;
      return currentDate;
    },
  },
  // activated() {
  //   this.active = this.$route.params.typeNum || 0;
  //   this.childActive(this.active);
  // },
  mounted() {
    this.init();
  },
  methods: {
    toShares() {
      this.$router.push({ name: "shares" });
    },
    radioChange(name) {
      console.log(this.radio);
    },
    //返回
    backHandler() {
      if (weixin.isAndroid()) {
        window.JS_TROOPS.goBack();
      } else {
        this.$router.go(-1);
      }
    },
    // 售后详情
    toDetail(id, type) {
      if(type==2){
        this.$router.push({name:'successOrFailed', params:{id}})
      }else{
        this.$router.push({name:'inAfterSales', params:{id}})
      }
      
    },
    deleteSales(id) {
      this.$dialog
        .alert({
          title: "售后单删除",
          message: "亲，您确认要删除售后单吗？",
          showCancelButton: true,
          cancelButtonText: "取消",
          confirmButtonText: "确定",
        })
        .then(() => {
          deleteAfterSales({ id })
            .then((result) => {
              Toast(result.data.msg);
              this.init();
            })
            .catch((err) => {});
        });
    },
    returnOrderDetail(index) {
      var orederDetail = this.list[index];
      var aftersale_id = orederDetail.item[0].ext_arr[0].id;
      this.$router.push({
        name: "returnOrderDetail",
        params: { id: aftersale_id },
      });
    },
    returnShopDetail(index) {
      var orederDetail = this.list[index];
      var goods_id = orederDetail.item[0].goods_id;
      this.$router.push({ name: "odersDetails", params: { id: goods_id } });
    },
    onRefresh() {
      if (this.active == 0) {
        this.getDataHanlder("all");
      } else if (this.active == 1) {
        this.getDataHanlder(0);
      } 
      this.isLoading = false;
    },
    //初始化
    init() {
      this.getDataHanlder("all");
    },
    //获取数据
    getDataHanlder(status) {
      let data = {
        offset: this.page,
        per_page: 50,
        type: status,
      };
      getAfterSalesList(data).then((res) => {
        console.log("getOrders2", res);
        if (res.data.code == 1) {
          this.list = res.data.data.data;
        } else {
          this.$dialog.alert({
            message: res.data.msg,
          });
        }
      });
    },
    //切换
    childActive(val) {
      console.log(121212, this.active);
      // 未发货nosend 已发货noget 待评价 nocomment 售后aftersale
      if (val == 0) {
        this.getDataHanlder("all");
      } else if (val == 1) {
        this.getDataHanlder(0);
      }
    },
    // 售后详情
    
  },
};
</script>
<style scoped>
p {
  padding: 0;
  margin: 0;
}
.bg {
  background: #f1f3f6;
  height: 100% !important;
}
.orders_list {
  background: #fff;
  position: relative;
  margin: 4vw;
  border-radius: 10px;
}
.order_box_title {
  height: 9.3vw;
  font-size: 3.2vw;
  padding-left: 2.93vw;
  line-height: 9.3vw;
  color: #999;
  border-bottom: 1px solid #eeeeee;
}
.order_box {
  display: flex;
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 10px;
}
.order_box img {
  width: 24vw;
  height: 24vw;
  padding-top: 3.3vw;
  padding-left: 2.93vw;
}
.order_box p {
  padding-left: 4vw;
  padding-top: 3.3vw;
  color: #333;
}
.order_box span {
  padding-left: 4vw;
  padding-top: 3vw;
  display: block;
  color: #ff0000;
  font-size: 18px;
}
.order_bottom {
  padding: 2vw 2.93vw;
  color: #808080;
  font-size: 13px;
}
.order_ab {
  position: absolute;
  right: 4vw;
  bottom: 17vw;
  width: 22.66vw;
  height: 7vw;
  line-height: 7vw;
  text-align: center;
  border-radius: 1.3vw;
  font-size: 3.2vw;
  background: #fe4b20;
  color: #fff;
}
.empty {
  margin-top: 29.33vw;
  text-align: center;
  height: 75.3vh;
}
.empty img {
  width: 54.4vw;
  height: 37.6vw;
}
.empty p {
  font-size: 3vw;
  color: #333;
  margin-top: 4vw;
}
.popup {
  margin: 5vw 6vw;
}
.popup-title {
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  margin: 2vw 0;
}
.popup-tip {
  background: #f9f9f9;
  padding: 3vw;
  line-height: 7vw;
  color: #737373;
}
.cancel-reason {
  line-height: 15vw;
}
.cancel-reason .cancel-title {
  font-size: 18px;
}
.cancel-reason .list {
  margin: 2vw 0;
  color: #737373 !important;
}
.van-radio__label {
  color: #737373 !important;
}
.popup-button {
  height: 5vh;
  background: #fe4b20;
  color: #fff;
  font-size: 20px;
  width: 80vw;
  margin: 0vh auto;
  line-height: 5vh;
  text-align: center;
  border-radius: 2.5vh;
}
.van-tabs__nav--line {
  width: 100vw;
}
.back_box {
  background: #fff !important;
}
.dfk {
  display: flex;
  /* background-image: url('../../assets/ddfk.png'); */
  background-repeat: no-repeat;
  background-size: 135px 20px;
  min-width: 135px;
  background-position: center center;
  justify-content: flex-end;
  font-size: 10px;
  padding-right: 10px;
  color: #fe4b20;
}
</style>
<style>
</style>